<template>
	<view class="courses-detail-page home-wrap u-m-b-20" v-if="coursesDetail">
		<base-nav-bar :isBack="true" :background="{'background':'#fff'}">
			<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
				课程列表
			</text>
		</base-nav-bar>
		<view class="swiper-box">
			<u-swiper :list="coursesDetail.images" :height="198" :indicator="true" indicatorMode="dot"></u-swiper>
		</view>
		<view class="courses-detail">
			<view class="courses-name">{{ coursesDetail.name }}</view>
			<view class="courses-desc">
				{{ coursesDetail.description }}
			</view>
			<view class="courses-info">
				<view class="courses-price"><text class="courses-unit">￥</text> {{ coursesDetail.price }}</view>
				<view class="courses-sale">{{ coursesDetail.sales?  '已售'+coursesDetail.sales  : '暂无购买' }}</view>
			</view>
		</view>
		<view class="courses-other">
			<view class="courses-time">
				<view class="item-left">
					<view class="title">课时</view>
					<view class="time">{{coursesDetail.sum||10}}节课</view>
					<view class="tag" @click="$Tips('/pages/courses/coursesSchedule?courses_id='+courses_id)">查看课表
					</view>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="courses-teacher">
				<view class="item-left">
					<view class="title">老师</view>
					<image :src="coursesDetail.teacher_image" class="avatar"></image>
					<view class="name">{{coursesDetail.teacher_name}}</view>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="evaluate-box" v-if="coursesDetail.comment_count">
			<view class="evaluate-title">
				<view class="title-left">评价 ({{coursesDetail.comment_count}})</view>
				<view class="title-right" @click="$Tips('/pages/courses/evaluateList?courses_id='+courses_id)">
					<view class="more">更多</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="evaluate-list">
				<view class="evaluate-item" v-for="(item,index) in coursesDetail.comment_list" :key="index">
					<view class="evaluate-top">
						<view class="left">
							<image :src="item.avatar" class="avatar"></image>
							<view class="nickname">{{item.nickname}}</view>
						</view>
						<view class="right">{{item.createtime}}</view>
					</view>
					<view class="evaluate-center">
						<view class="left">
							<view class="tag">老师评分</view>
							<u-rate :value="item.teacher" readonly activeColor="#FDAC2D"
							        inactiveColor="#D8D8D8"></u-rate>
						</view>
						<view class="right">
							<view class="tag">课程评分</view>
							<u-rate :value="item.course" readonly activeColor="#FDAC2D"
							        inactiveColor="#D8D8D8"></u-rate>
						</view>
					</view>
					<view class="evaluate-bottom">{{item.content}}</view>
					<view class="evaluate-images" v-if="item.images">
						<u-album :urls="item.images"></u-album>
					</view>
				</view>
			</view>
		</view>
		<view class="fill-box" style="height: 190rpx;"></view>
	</view>
</template>

<script>
import BaseNavBar from "@/components/BaseNavBar.vue";

export default {
	components: {
		BaseNavBar
	},
	data() {
		return {
			courses_id: null,
			coursesDetail: null,
		};
	},
	onLoad(options) {
		if (options && options.courses_id) {
			this.courses_id = options.courses_id
			this.getCourseDetail();
		}
	},
	methods: {
		getCourseDetail() {
			this.$Api.courses.getCourseDetail({
				id: this.courses_id,
			}).then((res) => {
				this.coursesDetail = res.data;
			});
		},
	},
};
</script>

<style lang="scss">
.courses-detail-page {
	height: 100%;
	min-height: 100vh;
	background: #f6f6f8;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	
	
	.swiper-box {
		width: 100%;
		height: 396rpx;
	}
	
	.courses-detail {
		width: 100%;
		background: #fff;
		padding: 26rpx 38rpx;
		box-sizing: border-box;
		
		.courses-name {
			font-weight: bold;
			font-size: 36rpx;
		}
		
		.courses-desc {
			font-size: 28rpx;
			color: #999ca7;
			margin-top: 20rpx;
		}
		
		.courses-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			
			.courses-price {
				font-size: 40rpx;
				font-weight: bold;
				color: #FD463E;
			}
			
			.courses-unit {
				font-size: 28rpx;
			}
			
			.courses-sale {
				padding: 8rpx 10rpx;
				background:  rgba(48,170,77,0.1);
				border-radius: 6rpx;
				font-size: 24rpx;
				color: #30AA4D;
			}
		}
	}
	
	.courses-other {
		margin-top: 20rpx;
		background-color: #ffffff;
		
		.courses-time {
			border-bottom: 1rpx solid #E5E5E5;
		}
		
		.courses-time,
		.courses-teacher {
			height: 106rpx;
			padding: 0 36rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E5E5E5;
			
			.item-left {
				display: flex;
				align-items: center;
				
				.title {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					margin-right: 32rpx;
				}
				
				.avatar {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				
				.time,
				.name {
					font-size: 30rpx;
					color: #333333;
					font-weight: bold;
					margin-right: 10rpx;
				}
				
				.tag {
					padding: 8rpx 10rpx;
					background:  rgba(48,170,77,0.1);
					border-radius: 6rpx;
					font-size: 24rpx;
					color: #30AA4D;
				}
			}
		}
		
	}
	
	.evaluate-box {
		margin-top: 20rpx;
		padding: 30rpx 36rpx;
		background-color: #ffffff;
		
		.evaluate-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.title-left {
				font-weight: bold;
				font-size: 32rpx;
			}
			
			.title-right {
				display: flex;
				align-items: center;
				
				.more {
					font-size: 26rpx;
					color: #999999;
					margin-right: 10rpx;
				}
			}
		}
		
		.evaluate-list {
			background-color: #ffffff;
			
			.evaluate-item {
				padding-top: 40rpx;
				border-bottom: 1rpx solid #E5E5E5;
				
				.evaluate-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #3A3A3A;
						
						.avatar {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							margin-right: 12rpx;
						}
					}
					
					.right {
						font-size: 26rpx;
						color: #999CA7;
					}
				}
				
				.evaluate-center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;
					
					.left {
						display: flex;
						align-items: center;
						
						.tag {
							padding: 8rpx 10rpx;
							background: #fff8e5;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #FDAC2D;
						}
					}
					
					.right {
						display: flex;
						align-items: center;
						
						.tag {
							padding: 8rpx 10rpx;
							background:  rgba(48,170,77,0.1);
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #30AA4D;
						}
					}
					
				}
				
				.evaluate-bottom {
					font-size: 26rpx;
					color: #999CA7;
					line-height: 48rpx;
					padding-bottom: 20rpx;
				}
				.evaluate-images{
					padding-bottom: 20rpx;
				}
			}
		}
	}
	
	.footer-box {
		width: 100%;
		height: 190rpx;
		position: fixed;
		// bottom: calc(env(safe-area-inset-bottom) / 2);
		bottom: 0;
		background: #fff;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx 38rpx;
		box-sizing: border-box;
		
		.order-confirm {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			color: #fff;
			background: #30AA4D;
			box-shadow: 0rpx 4rpx 12rpx 0rpx  rgba(48,170,77,0.1);
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 34rpx;
			margin-top: 18rpx;
		}
	}
}
</style>